<template>
  <div class="all">
    <header>
      <div class="div">
        <img src="../../assets/fff返回.png" @click="back()" alt="">
        <span class="solid" @click="back()">返回</span>
      </div>
      <div class="div">
        <span>团队主页</span>
      </div>
      <div class="div">
        <span @click="updateTeam" v-show="TeamInfo.USER_ID == userid">编辑团队</span>
      </div>
    </header>
    <div class="all1">
      <div class="boxInfo">
        <ul class="TeamInfoUL">
          <li class="InfoLeft">
            <img v-if="TeamInfo.team_icon !== null && TeamInfo.team_icon !== undefined && TeamInfo.team_icon !== ''" :src="TeamInfo.team_icon" class="photo" alt="">
            <img v-else src="../../assets/男医生@2x.png" class="photo" alt="">
          </li>
          <li class="InfoRight">
            <p class="fontSize15" style="font-weight: bold">{{TeamInfo.team_name}}</p>
            <p class="fontSize13">{{TeamInfo.NICK_NAME}} <button class="tagTuandui">团队长</button></p>
            <p class="fontSize13">
              <a >{{TeamInfo.MAJOR}}</a>
              <a >|</a>
              <a >{{TeamInfo.DEPART}}</a>
            </p>
            <p class="hospital">
              {{TeamInfo.HOSPITAL_NAME}}
              <span class="biaoqian" style="color: #FFFFFF!important;">{{TeamInfo.GRADE}}</span>
            </p>
          </li>
          <li class="TeamInfoRight" v-show="topActive == 0 || topActive == 1" @click="runCode()">
            <img src="../../assets/二维码.png" alt="">
<!--            <span>扫一扫</span>-->
<!--            <span>{{TeamInfo.team_name}}二维码</span>-->
          </li>
        </ul>
        <div class="divMenu" style=" border-radius: 10px 10px 0 0;
  margin-top: 10px;">
          <ul @click.stop="lookTeam()">
            <li>{{TeamInfo.count}}人</li>
            <li>团队成员</li>
          </ul>
          <ul @click="clickManaging_patients">
            <li>{{TeamInfo.huanzheSize ? TeamInfo.huanzheSize + '个' : '暂无'}}</li>
            <li>管理患者</li>
          </ul>
          <ul @click="clickPrice">
            <li>{{TeamInfo.size ? TeamInfo.size + '项' : '暂无'}}</li>
            <li>提供服务</li>
          </ul>
        </div>
        <div class="divMenu">
          <ul>
            <li>{{TeamInfo.jiezhenCount ? TeamInfo.jiezhenCount  : '暂无'}}</li>
            <li>接诊率
            </li>
          </ul>
          <ul >
            <li>{{TeamInfo.haopingLv ? TeamInfo.haopingLv  : '暂无'}}</li>
            <li>好评率
            </li>
          </ul>
          <ul >
            <li>{{TeamInfo.zixunCount ? TeamInfo.zixunCount : '暂无'}}</li>
            <li>咨询量
            </li>
          </ul>
        </div>
      </div>
      <div class="goodDivAll">
        <div class="goodDiv">
          <img src="../../assets/图文介绍.png" class="tuwenImg" alt="">
          <span class="goodText">
              <a >团队简介：</a>
              <a >{{TeamInfo.team_intro}}</a>
            </span>
        </div>
<!--        <div class="goodDiv">
          <img src="../../assets/图文擅长.png" class="tuwenImg" alt="">
          <span class="goodText">
              <a style="">团队擅长：</a>
              <a >
                {{TeamInfo.team_goodat}}
              </a>
            </span>
        </div>-->
      </div>
    </div>
    <template v-if="topActive === 0 || topActive === 1">
      <div class="title overText fontSize15">
        <span class="colorBlue gonggaoSpan" >【团队通知】</span>
        <span class="gonggaoSpan"></span>
      </div>
      <div class="title fontSize15 label" v-if="TeamInfo.doctor" @click.stop="lookTeam(TeamInfo)">
          <span class="fontWeightBlod">
             <a class="hengGang"></a>团队成员({{TeamInfo.doctor.length}}人)
          </span>
          <span style="color: #999">
            查看更多
            <img class="imgMore" src="../../assets/更多灰.png" alt="">
          </span>
      </div>
      <div class="teamList">
        <ul class="ul">
          <li  @click="clickDoctor(item)"  v-for="(item, index) in TeamInfo.doctor" :key="index">
            <img v-if="item.PHOTO" :src="item.PHOTO" class="photo" alt="">
            <img v-else src="../../assets/男医生@2x.png" class="photo" alt="">
            <span>{{item.NICK_NAME}}</span>
          </li>
        </ul>
      </div>
      <div class="title fontSize15 fontWeightBlod" >
        <a class="hengGang"></a>登录者信息
      </div>
      <div class="LoginInfo">
        <ul>
          <li>
            <img v-if="LoginInformation.PHOTO !== '' && LoginInformation.PHOTO !== undefined && LoginInformation.PHOTO !== null" :src="LoginInformation.PHOTO" class="PHOTO" alt="">
            <img v-else src="../../assets/男医生@2x.png" class="PHOTO" alt="">
          </li>
          <li>
            <p>
              <span>{{LoginInformation.NICK_NAME}}</span>
              <span>|</span>
              <span>{{LoginInformation.MAJOR}}</span>
              <span>|</span>
              <span>{{LoginInformation.DEPART}}</span>
            </p>
            <p>
              <span>{{LoginInformation.HOSPITAL_NAME}}</span>
              <span>|</span>
              <span
                style="color: #1da4f2;border-radius: 10px;
              padding: 1px 3px;
              box-sizing: border-box;
              border: 1px solid #1da4f2"
              >{{LoginInformation.dict_name}}</span>
            </p>
          </li>
        </ul>
      </div>
      <div class="title fontSize15 fontWeightBlod" >
        <a class="hengGang"></a>常用功能
      </div>
      <div class="CommonFunctions">
          <div  v-for="(item, index) in commonUseList" :key="index" @click="clickUse(item)">
            <img :src="item.img" alt="">
            <span>{{item.name}}</span>
          </div>
      </div>
    </template>
    <template v-else >
      <div class="menu">
        <ul @click="teamMenuOnchange">
          <li v-for="(item, index) in modelMenu"
              :key="index"
              @click="teamActive = item.index"
              :class="[teamActive === item.index ? 'selectMenu' : '']"
          >{{item.name}}</li>
        </ul>
      </div>
      <div v-show="teamActive === 0" style="margin-bottom: 50px">
        <div  class="box"
             v-for="(item, index) in teamDoctorList" :key="index">
          <div class="box_left">
            <img v-if="item.PHOTO" :src="item.PHOTO" class="PHOTO" alt="">
            <img v-else src="../../assets/男医生@2x.png" class="PHOTO" alt="">
            <span></span>
          </div>
          <div class="box_right" >
            <ul class="box_ul">
              <li>
            <span class="name">
              <span style="font-weight: bold;font-size: 15px">{{item.NICK_NAME}}</span>
              <button v-if="item.USER_ID === TeamLeader" class="tagTuandui">团队长</button>

              <!--              <span>|</span>-->
<!--              <span style="font-weight: 500;font-size: 13px !important;">{{item.MAJOR}}</span>-->
<!--              <span>|</span>-->
<!--              <span style="font-weight: 500;font-size: 13px !important;">{{item.DEPART}}</span>-->
            </span>
                <button class="btnXiangQing" @click.stop="doctorInfo(item)">医生详情
                  <img src="../../assets/更多白.png" alt="">
                </button>
              </li>
              <li>
                <span style="font-weight: 500;font-size: 13px !important;">{{item.MAJOR}}</span>
                <span>&nbsp;|&nbsp;</span>
                <span style="font-weight: 500;font-size: 13px !important;">{{item.DEPART}}</span>
              </li>
              <li>
                <span class="jieShao">{{item.HOSPITAL_NAME}}</span>
                <button class="biaoqian">{{item.GRADE}}</button>
              </li>
            </ul>
<!--            <div class="box_rigth_bottom" >
              <p style="color: #333333">
                <a >接诊率:</a><span>{{item.jiezhenCount}}</span>
                <a >好评率:</a><span>{{item.haopingLv}}</span>
                <a >咨询量:</a><span>{{item.zixunCount}}</span>
              </p>
              <p class="goodAt" style="color: #333333">
                <a style="display: block">擅长:</a>
                <span>{{item.Goodat}}</span>
              </p>
              <p style="color: #333333">
                <a >最快回复:</a>
                <span style="color: #1DA4F2"  v-if="item.min !== undefined && item.min !== null && item.min !== ''">{{item.min}}</span>
                <span v-else style="color: #999999">暂无</span>
                <a >平均回复:</a>
                <span style="color: #1DA4F2" v-if="item.avg !== undefined && item.avg !== null && item.avg !== ''">{{item.avg}}</span>
                <span style="color: #999999" v-else>暂无</span>
              </p>
            </div>-->
          </div>
        </div>
      </div>
      <el-table
        v-show="teamActive === 1 && priceList.length > 0"
        ref="table"
        v-loading="loadingShow"
        element-loading-text="数据正在加载中..."
        :data="priceList"
        border
        @cell-click="handle"
        @selection-change="handleSelectionChange"
        @header-click="tableHeader"
        :height="tabHeight"
        :header-cell-style="{background:'#1da4f2',color:'#fff', textAlign:'center'}"
        style="width: 100%;font-size: 15px;margin-bottom: 60px">
        <div slot="empty">
          <div>
            <img src="../../assets/空两本书.png" alt="" width="140" height="140" />
          </div>
          <p :style="{'marginTop': '5px'}">暂无团队提供服务</p>
        </div>
<!--        <el-table-column
          label="序号"
          type="index"
          align="center"
          fixed
          width="60">
        </el-table-column>-->
        <el-table-column
          prop="item_type"
          label="服务类型"
          width="100"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{scope.row.item_type ? typeName(scope.row.item_type) : ''}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="item_id"
          label="服务项目"
          width="120"
        >
          <template slot-scope="scope">
            <span>{{scope.row.item_id ? scope.row.item_id : ''}}</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="rebate_amount"
          label="单价"
          width="90"
          align="center"
        >
          <template slot-scope="scope">
            <span>{{scope.row.rebate_amount ? scope.row.rebate_amount : ''}}元/次</span>
          </template>
        </el-table-column>
        <el-table-column
          prop="doclist"
          label="服务人员"
          width="100"
        >
          <!--        :filters="typelist"-->
          <!--        :filter-method=" filterTagTypeList"-->
          <template slot-scope="scope">
            <div  v-if="scope.row.doclist.length > 0">
              <span
                    v-for="(item, index) in scope.row.doclist" :key="index">
                {{item.doc_user_name}}
              {{index < scope.row.doclist.length-1 ? ',' : ''}}
              </span>
            </div>
            <div v-else>暂无</div>
            <!--          <span>{{scope.row.item_id ? scope.row.item_id : ''}}</span>-->
          </template>
        </el-table-column>
      </el-table>
        <van-empty
          v-show="priceList.length <= 0 && teamActive === 1"
          style="width: 100%;height: 60%"
          class="custom-image"
          :image="require('../../assets/空两本书.png')"
          description="暂无团队提供的服务"
        />
      <div class="bottom" v-show="topActive && TeamInfo.shenqing !== 1 && topActive !== 3">
        <button class="apply fontSize17 fontWeightBlod" @click="insertTeam()">
          {{TeamInfo.shenqing == 3 ? '再次申请加入' : TeamInfo.shenqing !== 1 ? '申请加入' :  ''}}</button>
      </div>
    </template>
    <van-popup v-model="insertShow" round position="bottom" :style="{ height: '80%', bottom: '50px' }" >
      <div class="popTitle">申请加入团队说明</div>
      <textarea class="textarea fontSize15" v-model="msg" placeholder="请填写申请加入团队说明" name="" id="" cols="30" rows="10"></textarea>
      <div class="popBottom">
        <button @click="insertShow = !insertShow">返回</button>
        <button class="SendButton" @click="ApplicationSubmission">申请提交</button>
      </div>
    </van-popup>
  </div>
</template>

<script>
import {Toast} from 'vant'
import typeList from '../../http/video.http'
export default {
  name: 'LookTeamHome',
  data () {
    return {
      userid: this.$route.query.userid,
      TeamInfo: [],
      id: this.$route.query.id,
      LoginInformation: [],
      topActive: Number(this.$route.query.topActive),
      modelMenu: [
        {
          name: '团队成员',
          index: 0
        }, {
          name: '团队提供服务',
          index: 1
        }
      ],
      teamActive: 0,
      teamDoctorList: [],
      TeamLeader: '',
      insertShow: false,
      msg: '',
      priceList: [],
      is_allow_in: 0, // 是否允许人员加入 0否1是
      leftMenu: typeList.typeList
    }
    // {
    //   name: '团队成员',
    //     path: '/TeamMembers',
    //   img: require('../../assets/team/团队成员@2x.png')
    // },
  },
  mounted () {
    // 获取团队信息和成员
    this.getTeamDetail()

    // 已加入 获取登录者 医生 信息
    // this.getDocInfo()
    if (this.topActive == 0 || this.topActive == 1) {
      // // 已加入 获取登录者 医生 信息
      this.getDocInfo()
    } else {
      // 未加入团队 查看医生信息
      // 未加入团队 团队服务价格
    }
    this.getTeamDoctor()
    this.findPriceList()
  },
  computed: {
    typeName () {
      return function (type) {
        let text = ''
        this.leftMenu.forEach((curr, index) => {
          if (curr.type == type) {
            text = curr.name
            return false
          }
        })
        return text
      }
    },
    commonUseList () {
      let obj = [
        {
          name: '团队通知',
          path: '#',
          img: require('../../assets/team/团队公告@2x.png')
        }, {
          name: '团队提供服务',
          path: '/priceList',
          img: require('../../assets/team/团队提供服务@2x.png')
        }, {
          name: '档案分配',
          path: '/FileDistributionList',
          img: require('../../assets/team/患者管理@2x.png')
        }, {
          name: '团队成员排班',
          path: '/TeamSchedulingList', //
          img: require('../../assets/team/团队成员排班@2x.png')
        }, {
          name: '团队业务处理',
          path: '/TeamMenu',
          img: require('../../assets/team/团队业务处理@2x.png')
        }, {
          name: '评定审核链',
          path: '/JudgeList',
          img: require('../../assets/team/评定审核链@2x.png')
        }, {
          name: '组织架构',
          path: '/OrganizationalList', //
          img: require('../../assets/team/组织架构@2x.png')
        }, {
          name: '个人建档码',
          path: '/TeamOrganCode', //
          img: require('../../assets/team/个人建档码.png')
        }, {
          name: '系统设置',
          path: '/TeamSys', //
          img: require('../../assets/team/系统设置.png')
        }
      ]
      if (this.TeamInfo.USER_ID == this.userid) {
        obj[0].name = '团队通知维护'
        obj[1].name = '团队服务维护'
      } else {
        obj[0].name = '团队通知查看'
        obj[1].name = '团队服务查看'
      }
      return obj
    }
  },
  methods: {
    // 点击管理患者
    clickManaging_patients () {
      if (this.topActive == 0 || this.topActive == 1) {
        if (this.TeamInfo && this.TeamInfo.USER_ID == this.userid) {
          this.$router.push({path: '/FileDistributionList', query: {userid: this.userid, isAll: 1, team_id: this.id}})
        }
      }
    },
    // 点击 服务价格
    clickPrice () {
      if (this.topActive == 0 || this.topActive == 1) {
        if (this.TeamInfo && this.TeamInfo.USER_ID == this.userid) {
          this.$router.push({path: '/priceList', query: {userid: this.userid, isAll: 1, id: this.id}})
        } else {
          this.$router.push({path: '/TeamSevices', query: {userid: this.userid, isAll: 1, id: this.id}})
        }
      }
    },
    clickDoctor (data) {
      this.$router.push({path: '/doctorInfo', query: {doc_user_id: data.USER_ID, Active: this.Active, id: this.id}})
    },
    // 编辑团队
    updateTeam () {
      this.$router.push({path: '/BuildTeam', query: {userid: this.userid, isEdit: 1, id: this.id}})
    },
    clickUse (item) {
      if (item.path === '#') {
        Toast('正在开发中敬请期待...')
      } else if (item.path === '/FileDistributionList') {
        if (this.TeamInfo && this.TeamInfo.USER_ID == this.userid) {
          this.$router.push({path: '/FileDistributionList', query: {userid: this.userid, isAll: 1, team_id: this.id}})
        }
      } else if (item.path === '/priceList') {
        if (this.TeamInfo && this.TeamInfo.USER_ID == this.userid) {
          this.$router.push({path: '/priceList', query: {userid: this.userid, isAll: 1, id: this.id}})
        } else {
          this.$router.push({path: '/TeamSevices', query: {userid: this.userid, isAll: 1, id: this.id}})
        }
      } else if (item.path === '/TeamSys') {
        if (this.TeamInfo && this.TeamInfo.USER_ID == this.userid) {
          this.$router.push({path: '/TeamSys', query: {userid: this.userid, isAll: 1, team_id: this.id, is_allow_in: this.is_allow_in}})
        }
      } else if (item.path === '/TeamOrganCode') {
        this.$router.push({
          path: item.path,
          query: {userid: this.userid, team_id: this.id, group_id: '', doc_user_id: this.userid}
        })
      } else if (item.path === '/TeamMenu') {
        this.$router.push({
          path: item.path,
          query: {userid: this.userid, team_id: this.id, doc_user_id: this.userid}
        })
      } else {
        sessionStorage.removeItem('type')
        let isEdit
        if (this.TeamInfo && this.TeamInfo.USER_ID == this.userid) {
          isEdit = 1
        } else {
          isEdit = 0
        }
        if (this.TeamInfo && this.TeamInfo.USER_ID == this.userid) {
          this.$router.push({
            path: item.path,
            query: {userid: this.userid, isAll: 1, id: this.id, isEdit: isEdit, team_id: this.id}
          })
        } else {
          this.$toast('您暂无权限')
        }
      }
    },
    // 未加入团队 团队服务价格
    findPriceList () {
      this.$http.findTeamPrice({team_id: this.id,
        is_show_doc: '1'
      })
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.priceList = res.data.data
          } else {
            Toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
          Toast('您的网络有些拥挤，请稍后再试')
        })
    },
    runCode () {
      // this.$router.push({path: 'TeamCode', query: {id: this.id, topActive: 2}})
      this.$router.push({
        path: '/TeamOrganCode',
        query: {userid: this.userid, team_id: this.id, group_id: ''}
      })
    },
    // 提交申请
    ApplicationSubmission () {
      this.$http.createDocTeamRequest({team_id: this.id, // 团队id列表可以取到
        doc_user_id: this.userid, // 申请医生ID
        msg: this.msg // 申请加入团队说明
      })
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.topMenuOnchange()
            Toast('提交申请成功')
            this.msg = ''
            this.insertShow = false
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 申请按钮点击事件
    insertTeam () {
      this.msg = ''
      this.insertShow = true
    },
    // 已加入
    lookTeam () {
      if (this.topActive == 0 || this.topActive == 1) {
        this.$router.push({
          path: '/TeamMembers',
          query: {id: this.id, TeamLeader: this.TeamLeader, doc_user_id: this.userid}
        })
      }
    },
    // 未加入 查看医生详细资料
    doctorInfo (data) {
      this.$router.push({path: '/doctorInfo', query: {doc_user_id: data.USER_ID}})
    },
    // 未加入 获取团队医生信息
    getTeamDoctor () {
      this.$http.findDoctor({team_id: this.id})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.teamDoctorList = res.data.data
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    // 未加入查看医生信息 切换
    teamMenuOnchange () {

    },
    getDocInfo () {
      this.$http.minidoctorDetail({doc_user_id: this.userid})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.LoginInformation = res.data.data
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    getTeamDetail () {
      this.$http.Teamdetail({id: this.id})
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.TeamInfo = res.data.data
            this.TeamLeader = res.data.data.USER_ID
            this.is_allow_in = res.data.data.is_allow_in

            // this.teamDoctorList = res.data.data.doctor
          }
        })
        .catch(err => {
          console.log(err)
        })
    },
    back () {
      this.$router.history.go(-1)
    }
  }
}
</script>

<style scoped>
.all{
  width: 100%;
  height: 100%;
  overflow: auto;
  background: #FAF9FE;
}
.all1{
  width: 100%;
  background: #1DA4F2;
}
.colorBlue{
  color: #1da4f2;
}
.fontSize11{
  font-size: 11px;
}
.fontSize13{
  font-size: 13px;
}
.fontSize15{
  font-size: 15px;
}
.fontSize17{
  font-size: 17px;
}
.fontWeightBlod{
  font-weight: bold;
}
header,
.biaoqian,
.hospital,
.divMenu ul li,
.title,
.label span,
.teamList ul li{
  display: flex;
  align-items: center;
}
header{
  width: 100%;
  height: 44px;
  font-family: "PingFang SC";
  color: white;
  position: sticky;
  top: 0;
  background: #1da5f2;
  z-index: 99;
}
.div{
  width: 33%;
  font-size: 15px;
  font-weight: bold;
  display: flex;
  align-items: center;
}
.div:nth-child(1) img{
  margin: 0 5px 0 15px;
}
.div:nth-child(1) img,
.imgMore{
  width: 7px;
  height: 13px;
}
.imgMore{
  margin-left: 5px;
}
.div:nth-child(2){
  justify-content: center;
}
.div:nth-child(3){
  justify-content: flex-end;
}
.div:nth-child(3) span{
  margin-right: 15px;
}
.boxInfo{
  margin: 0 auto;
  border-radius: 10px;
  display: flex;
  flex-direction: column;
  padding:  15px 15px 0 15px;
  box-sizing: border-box;
}
.TeamInfoUL{
  display: flex;
}
.InfoLeft{
  width: 20%;
  display: flex;
  flex-direction: column;
  /*justify-content: center;*/
}
.InfoLeft span{
  display: flex;
  align-items: center;
  justify-content: center;
}
.InfoLeft img{
  margin-top: 10px;
}
.photo{
  width: 60px;
  height: 60px;
  border-radius: 50%;
  object-fit: cover;
}
.InfoRight{
  width: 65%;
  display: flex;
  flex-direction: column;
  color: #FFFFFF;
  margin-left: 8px;
  /*justify-content: space-around;*/
}
.TeamInfoRight{
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  color: #FFFFFF;
  font-size: 13px;
}
.TeamInfoRight img{
  width: 40px;
  height: 40px;
  margin-bottom: 5px;
}
.TeamInfoRight span{
  text-align: center;
}
.tagTuandui{
  font-size: 11px;
  min-height: 18px;
  padding: 0 5px;
  box-sizing: border-box;
  background: linear-gradient(90deg, #F9BD77, #FFED91);
  border-radius: 19px;
  border: none;
  color: #A8610B;
  margin-left: 10px;
}
.InfoRight p {
  min-height: 25px;
  /*margin-top: 10px;*/
}

.box p{
  min-height: 30px;
  color: white;
}

.biaoqian{
  min-width: 44px;
  height: 18px;
  border-radius: 15px;
  box-sizing: border-box;
  background: transparent;
  background: rgba(255, 255, 255, 0.1);
  color: #fff;
  border: 1px solid #fff;
  font-size: 11px;
  margin-left: 8px;
  justify-content: center;
}

.hospital{
  font-size: 13px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #FFFFFF;
}
.divMenu{
  width: 100%;
  display: flex;
  /*margin: 10px auto;*/
  background: rgba(255, 255, 255, 0.2);
  /*border-radius: 10px;*/
}
.divMenu:last-child{
  border-radius:  0 0 10px 10px ;
  margin-bottom: 10px;
}
.divMenu ul{
  width: 33%;
  padding: 10px 0;
  box-sizing: border-box;
}
.divMenu ul li:nth-child(1) {
  font-size: 17px;
  font-family: PingFang SC;
  font-weight: bold;
  color: #fff;
}

.divMenu ul li{
  width: 100%;
  height: 20px;
  justify-content: center;
  color: #fff;
  font-size: 13px;
}
.goodDivAll{
  background: white;
  padding: 10px 0;
  box-sizing: border-box;
  border-radius: 10px 10px 0 0;
}
.goodDiv{
  padding: 0 15px;
  box-sizing: border-box;
  margin-top: 8px;
  font-size: 15px;
  font-family: PingFang SC;
  font-weight: 500;
  line-height: 25px;
  display: flex;
  /*align-items: center;*/
}
.tuwenImg{
  width: 22px;
  height: 22px;
  margin-right: 3px;
}
.goodText{
  display: flex;
}
.goodText a{
  display: block;
}
.goodText a:nth-child(1){
  white-space: nowrap;
}
.label{
  justify-content: space-between;
}
.title{
  width: 100%;
  height: 44px;
  padding: 0 15px;
  box-sizing: border-box;
  background: #FFFFFF;
  margin-top: 5px;
}
.hengGang{
  display: block;
  width: 2px;
  border-radius: 1px;
  height: 15px;
  background: #1DA4F2;
  margin-right: 5px;
}

.overText{
  display: block;
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.gonggaoSpan{
  line-height: 44px;
}
.teamList{
  width: 100%;
}
.teamList ul{
  width: 100%;
  display: flex;
  background: #FFFFFF;
  overflow: scroll;
  white-space: nowrap;
  padding: 5px 0;
  box-sizing: border-box;
}
.teamList ul li{
  flex-direction: column;
  margin-left: 20px;
  font-size: 15px;
}
.LoginInfo ul{
  display: flex;
  padding: 10px 20px;
  box-sizing: border-box;
  font-size: 15px;
  background: #FFFFFF;
}
.LoginInfo ul li{
  font-size: 15px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.LoginInfo ul li p{
  margin-left: 10px;
}

.menu{
  width: 100%;
  height: 12vw;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 20px;
  box-sizing: border-box;
  font-size: 13px;
  font-family: PingFang SC;
  font-weight: bold;
  overflow-x: auto;
  background: white;
  /*position: sticky;*/
  /*top: 12vw;*/
  border-bottom: 1px solid #E5E5E5;
}
.menu::-webkit-scrollbar{
  display: none;
}
.menu ul{
  height: 29px;
  display: flex;
  align-items: center;
  border-radius: 5px;
}
.menu ul li:first-child{
  border-radius: 5px 0 0 5px;
}

.menu ul li:last-child{
  border-radius: 0px 5px 5px 0px;
}
.menu ul li{
  width:90px;
  height: 29px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #1da4f2;
}
.selectMenu{
  color: white !important;
  background: #1da4f2 !important;
}

.PHOTO{
  width: 55px;
  height: 55px;
  border-radius: 50%;
}
.box{
  padding: 10px;
  box-sizing: border-box;
  background: white;
  margin-bottom: 8px;
  display: flex;
}
.box:last-child{
  /*margin-bottom: 50px;*/
}
.box_left{
  width: 23%;
  display: flex;
  align-items: center;
  flex-direction: column;
  justify-content: space-between;
}
.dict_name{
  font-size: 11px;
  border: 1px solid #1DA4F2;
  border-radius: 2px;
  background: rgba(16, 184, 246, 0.1);
  color: #1da4f2;
  padding: 1px 3px;
  box-sizing: border-box;
  white-space: nowrap;
  /*margin-top: 10px;*/
}
.box_right{
  width: 78%;
}
.box_right ul{
  /*height: 60px;*/
  display: flex;
  flex-direction: column;
  align-content: space-around;
  justify-content: space-around;
}
.box_right ul li{
  height: 25px;
  display: flex;
  align-items: center;
}
.box_right ul li:nth-child(1){
  justify-content: space-between;
}
.name{
  font-size: 15px;
  font-family: PingFang SC;
  color: #333333;
}
.biaoqian{
  /*padding: 0px 8px;*/
  min-width: 44px;
  height: 18px;
  border-radius: 15px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  /* background: rgba(29, 164, 242, 0.1); */
  background: transparent;
  color: #1DA4F2;
  /* border: none; */
  border: 1px solid;
  font-size: 11px;
  margin-left: 8px;
}
.btnXiangQing{
  color: white;
  background: #1DA4F2;
  border: none;
  padding: 3px 8px;
  border-radius: 15px;
  box-sizing: border-box;
  font-size: 11px;
}
.btnXiangQing img{
  width: 5px;
  height: 9px;
  margin-left: 5px;
}

.btnXiangQing,
.biaoqian,
.jieShao
{
  display: flex;
  align-items: center;
  justify-content: center;
}
.jieShao{
  font-size: 13px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
  margin-right: 8px;
}
.box_rigth_bottom{
  margin-top: 5px;
}
.box_rigth_bottom p{
  margin-bottom: 5px;
}
.box_rigth_bottom p:nth-child(1),
.box_rigth_bottom p:nth-child(3){
  font-size: 13px;
}
.box_rigth_bottom p a{
}
.box_rigth_bottom p span{
  color: #E3170D;
  margin: 0 8px 0 3px;
}
.goodAt{
  font-size: 13px;
  display: flex;
}
.goodAt a{
  display: block;
  white-space: nowrap;
}
.goodAt span{
  /*width: 80%;*/
  text-overflow: -o-ellipsis-lastline;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  color: #333 !important;
}
.bottom{
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 60px;
  background: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
}
.apply{
  width: 92%;
  height: 44px;
  background: linear-gradient(90deg, #1DA3F2 0%, #1DC7F2 100%);
  border-radius: 22px;
  border: none;
  color: #FFFFFF;
}
.popTitle,
.keepBtn{
  font-size: 17px !important;
  font-weight: bold;
}
.popTitle,
.popBottom {
  display: flex;
  align-items: center;
}
.popTitle{
  min-height: 60px;
  justify-content: center;
}
.popBottom{
  width: 92%;
  height: 60px;
  justify-content: space-around;
  position: sticky;
  bottom: 0px;
  margin-left: 4%;
}
.textarea{
  width: 90%;
  resize: none;
  height: 75%;
  background: #FAF9FE;
  border: 1px solid #999999;
  border-radius: 10px;
  margin-left: 5%;
  padding: 10px;
  box-sizing: border-box;
}

.popBottom button{
  width: 45%;
  border-radius: 4px;
  min-height: 44px;
  border: none;
}
.popBottom button:nth-child(1) {
  border: 1px solid #1da4f2;
  background: transparent;
  color: #1da4f2;
}
.SendButton{
  height: 44px;
  background: linear-gradient(90deg, #1DA3F2 0%, #1DC7F2 100%);
  color: #FFFFFF;
}
.table{
  background: #FFFFFF;
}
.table tr{
  height: 40px;
  font-size: 15px;
}
.table tr td{
  border-left: 1px solid #E5E5E5;
  border-bottom: 1px solid #E5E5E5;
}
.table th{
  background: #1da4f2;
  color: #FFFFFF;
}
.CommonFunctions{
  width: 100%;
  background: #FFFFFF;
  display: flex;
  flex-wrap: wrap;
}

.CommonFunctions div {
  min-width: 50vw;
  min-height: 60px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  border-bottom: 1px solid #E5E5E5;
  box-sizing: border-box;
  font-size: 13px;
}
.CommonFunctions div:nth-child(odd){
  border-right: 1px solid #E5E5E5;
}
.CommonFunctions img{
  width: 22px;
  height: 22px;
  margin-left: 20%;
  margin-right: 5px;
}
</style>
